<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        select{
            width: 80px;
            height: 30px;
            margin-left: 10px;
        }
        span{
            color: green;
        }
    </style>

    <script>
        //初始化籍贯
        function initCity(){
            var province = document.getElementById("province").value;
            var city = {
                "hn":["长沙市","株洲市","湘潭市","衡阳市","邵阳市","岳阳市","常德市","张家界市","益阳市","娄底市","郴州市","永州市","怀化市"],
                "gd":["广州市","深圳市","珠海市","汕头市","佛山市","韶关市","湛江市","肇庆市","江门市","茂名市","惠州市"],
                "hb":["武汉市","黄石市","襄阳市","荆州市","宜昌市","十堰市","孝感市","荆门市","鄂州市","黄冈市","咸宁市","随州市"]
            };
            var values = city[province];
            document.getElementById("city").innerHTML = "";
            for (var i = 0; i < values.length; i++) {
                var option = document.createElement("option");
                option.value = values[i];
                option.innerHTML = values[i];
                document.getElementById("city").appendChild(option);
            }
        }
        //表单验证
        function checkEmail(){
            return /^\w+@\w{2,7}[.]\w+$/.test(document.getElementById("email").value);
        }
        function checkPassword1(){
            return /^\w{6,}$/.test(document.getElementById("password1").value);
        }
        function checkPassword2(){
            return /^\w{6,}$/.test(document.getElementById("password2").value);
        }
        function checkPasswordEqually(){
            if (document.getElementById("password1").value != document.getElementById("password2").value){
                alert("两次密码不一样");
                return false;
            }else{
                return true;
            }
        }

        window.onload = function (){
            //初始化籍贯
            initCity()
            //表单焦点事件
            check();
            //表单提交
            formSubmit();
        }

        //表单焦点事件
        function check(){
            var emailElement = document.getElementById("email");
            var password1Element = document.getElementById("password1");
            var password2Element = document.getElementById("password2");
            emailElement.onblur = function (){
                if (!checkEmail()){
                    document.getElementById("span_email").style.color = "red";
                }
            }
            emailElement.onfocus = function (){
                document.getElementById("span_email").style.color = "green";
            }
            password1Element.onblur = function (){
                if (!checkPassword1()){
                    document.getElementById("span_password1").style.color = "red";
                }
            }
            password1Element.onfocus = function (){
                document.getElementById("span_password1").style.color = "green";
            }
            password2Element.onblur = function (){
                if (!checkPassword2()){
                    document.getElementById("span_password2").style.color = "red";
                }
            }
            password2Element.onfocus = function (){
                document.getElementById("span_password2").style.color = "green";
            }
        }

        function formSubmit(){
            document.getElementById("form").onsubmit = function (){
                //判断是否满足正则
                if (!(checkEmail() && checkPassword1() && checkPassword2()&& checkPasswordEqually())){
                    return false;
                }else{
                    return true;
                }
            }
        }
    </script>
</head>
<body>
    <form action="#" method="post" id="form">
        <div>
            Email:<input type="text" id="email" name="password"><span id="span_email" style="color: green;">&nbsp&nbsp请输入正确的邮箱格式</span>
        </div>
        <div>
            密码：<input type="password" id="password1" name="password"><span id="span_password1">&nbsp&nbsp请输入少于6位的密码</span>
        </div>
        <div>
            确认密码：<input type="password" id="password2"><span id="span_password2">&nbsp&nbsp请输入少于6位的密码</span>
        </div>
        <div>
            籍贯：
            <!-- 籍贯 -->
            <select id="province" onchange="initCity()">
                <option value="hn">湖南省</option>
                <option value="gd">广东省</option>
                <option value="hb">湖北省</option>
            </select>
            <select id="city"></select>
        </div>
        <div>
            <input type="submit" value="提交">
        </div>
    </form>
</body>
</html>